<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="人员姓名" prop="personName">
        <el-input
          v-model="queryParams.personName"
          placeholder="人员姓名"
          clearable
          size="small"
          @keyup.enter.native="getList"
          @change="getList"
        />
      </el-form-item>
      <el-form-item label="班组/部门" prop="psPersonDept">
        <el-select
          v-model="queryParams.psPersonDept"
          placeholder="请选择班组/部门"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(dicts, index) in DeptList"
            :key="index"
            :label="dicts"
            :value="dicts"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工种/职务" prop="psPersonDuty">
        <el-select
          v-model="queryParams.psPersonDuty"
          placeholder="请选择工种"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, e) in DutyList"
            :key="e"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="time" style="margin-left: -30px">
        <el-date-picker
          v-model="queryParams.time"
          type="datetimerange"
          size="small"
          range-separator="至"
          @change="handleTime"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="岗位" prop="psPersonPost">
        <!-- <el-input
          v-model="queryParams.psPersonDuty"
          placeholder="工种/职务"
          clearable
          size="small"
          @keyup.enter.native="getList"
          @change="getList"
        /> -->
        <el-select
          v-model="queryParams.psPersonPost"
          placeholder="请选择岗位"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, e) in postList"
            :key="e"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetForm('queryForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 人员轨迹弹框 -->
    <el-dialog
      title="人员轨迹"
      :visible.sync="dialogTableVisible"
      center
      width="800px"
    >
      <div style="display: flex">
        <ul class="info">
          <li>
            <span>煤矿编码</span>
            <span>{{ person.csMineCode ? person.csMineCode : '— —' }}</span>
          </li>
          <li>
            <span>人员卡代码</span>
            <span>{{ person.psPersonCard ? person.psPersonCard : '— —' }}</span>
          </li>
          <li>
            <span>姓名</span>
            <span>{{ person.psPersonName ? person.psPersonName : '— —' }}</span>
          </li>
          <li>
            <span>身份证号码</span>
            <span>{{ person.psIdNumber ? person.psIdNumber : '— —' }}</span>
          </li>
          <li v-show="this.csMineCode!='006080012'">
            <span>岗位</span>
            <span>{{ person.psPersonPost ? person.psPersonPost : '— —' }}</span>
          </li>
          <li>
            <span>工种/职务</span>
            <span>{{ person.psPersonDuty ? person.psPersonDuty : '— —' }}</span>
          </li>
          <li>
            <span>所在区队班组/部门</span>
            <span>{{ person.psPersonDept ? person.psPersonDept : '— —' }}</span>
          </li>
          <li>
            <span>主要工作地点</span>
            <span>{{ person.psWorkPlace ? person.psWorkPlace : '— —' }}</span>
          </li>
          <li>
            <span>性别</span>
            <span>{{ person.psPersonSex ? person.psPersonSex : '— —' }}</span>
          </li>
          <li>
            <span>出生日期</span>
            <span>{{
              person.psPersonBirthday ? person.psPersonBirthday : '— —'
            }}</span>
          </li>
          <li>
            <span>血型</span>
            <span>{{
              person.psPersonBlood ? person.psPersonBlood : '— —'
            }}</span>
          </li>
          <li>
            <span>学历</span>
            <span>{{ person.psPersonEdu ? person.psPersonEdu : '— —' }}</span>
          </li>
          <li>
            <span>紧急联系电话</span>
            <span>{{ person.psPersonEmer ? person.psPersonEmer : '— —' }}</span>
          </li>
          <li>
            <span>家庭住址</span>
            <span>{{ person.psPersonAddr ? person.psPersonAddr : '— —' }}</span>
          </li>
          <li>
            <span>工种证件名称</span>
            <span>{{
              person.psPersonDutyname ? person.psPersonDutyname : '— —'
            }}</span>
          </li>
          <li>
            <span>工种证件编号</span>
            <span>{{
              person.psPersonDutyNum ? person.psPersonDutyNum : '— —'
            }}</span>
          </li>
          <li>
            <span>工种证件有效日期</span>
            <span>{{
              person.psPersonDutydate ? person.psPersonDutydate : '— —'
            }}</span>
          </li>
        </ul>
        <el-table
          v-loading="dialogloading"
          :data="dialogList"
          :header-cell-style="thaderBack"
          height="480"
        >
          <el-table-column
            prop="psPersonName"
            label="人员姓名"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="psStationName"
            label="分站名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="psStationLocation"
            label="分站位置"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="途径时间"
            width="180"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-table
      v-loading="loading"
      :data="tableList"
      :header-cell-style="thaderBack"
    >
       <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ps_person_card" label="人员卡代码">
      </el-table-column>
      <el-table-column prop="ps_person_name" label="姓名"> </el-table-column>
      <!-- <el-table-column prop="ps_person_post" label="岗位" v-if="this.csMineCode!='006080012'"> </el-table-column> -->
      <el-table-column prop="ps_person_post" label="岗位"> </el-table-column>
      <!-- <el-table-column prop="psPersonCard" label="区队班组"> </el-table-column> -->
      <el-table-column prop="ps_person_duty" label="工种/职务">
      </el-table-column>
      <el-table-column prop="ps_person_dept" label="区队班组/部门">
      </el-table-column>
      <el-table-column prop="ps_class_name" label="班次" v-if="this.csMineCode!='006080012'"> </el-table-column>
      <el-table-column prop="ps_mine_entertime" label="入井时间" width="180">
      </el-table-column>
      <el-table-column prop="ps_mine_outtime" label="出井时间" width="180">
        <template slot-scope="scope">
          {{scope.row.ps_mine_outtime == '1900-01-01 00:00:00'?'- -':scope.row.ps_mine_outtime}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="psPersonDept" label="当前所处区域" width="130">
      </el-table-column>
      <el-table-column prop="psPersonDept" label="进去当前区域时刻" width="150">
      </el-table-column>
      <el-table-column prop="psPersonDept" label="当前所处分站" width="130">
      </el-table-column>
      <el-table-column prop="psPersonDept" label="当前所处分站位置" width="150">
      </el-table-column>
      <el-table-column prop="psPersonDept" label="进入当前分站时刻" width="150">
      </el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
            >历史轨迹</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  getpostInfo,
} from '@/api/personnel/history'
import { getcsMineCode } from "@/utils/auth";
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogloading: false,
       starttime: '',
      endtime: '',
      postList: [],
      queryParams: {
        mineCode: '',
        inOutType: '',
        psPersonCard: '',
        personName: '',
        psPersonDept: '',
        psPersonDuty: '',
        time: [],
        endTime: '',
        startTime: '',
        // psMineEntertime: '',
        pageNum: 1,
        pageSize: 10
      },
      query: {
        pageNum: 1,
        pageSize: 10
      },
      csMineName: '',
      total: 0,
      names: '',
      tableList: [],
      person: [],
      dialogList: [],
      coalmineList: [],
      MineCode: '',
      MineName: '',
      info: {},
      typeList: [
        {
          value: '0',
          label: '0点班'
        },
        {
          value: '4',
          label: '4点班'
        },
        {
          value: '8',
          label: '8点班'
        }
      ],
      DeptList: [],
      DutyList: [],
      loading: false,
      total: 0,
      csMineCode:getcsMineCode()
    }
  },
  methods: {
    cellStyleFun() {
      return 'text-align:center'
    },
    thaderBack() {
      return {
        // background: '#0069eb',
        // color: '#fff',
        // textAlign: 'center',
        fontSize: '0.14rem'
      }
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'evencolor'
      } else {
        return 'oddcolor'
      }
    },
    /** 重置按钮操作 */
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
        this.queryParams.endTime = ''
        this.queryParams.startTime =''
      }
      this.getList()
    },
    // 获取部门
    getDept() {
      listInfo().then(res => {
        this.DeptList = res.data
      })
    },
    // 获取工种
    getDuty() {
      getInfo().then(res => {
        this.DutyList = res.data
      })
    },
    // 获取岗位
    getPost() {
      getpostInfo().then(res => {
        this.postList = res.data
      })
    },
    getList() {
      this.loading = true
      console.log(this.queryParams)
      addInfo(this.queryParams).then(res => {
        res = res.data
        this.tableList = res.data
        this.total = res.total
        this.loading = false
      })
    },
    handleUpdate(item) {
      this.dialogTableVisible = true
      this.dialogloading = true
      var query = {
        pkHistoryResult: item.pk_history_result
      }
      updateInfo(query).then(res => {
        this.dialogloading = false
        console.log(344, res)
        console.log(390, res)
        this.dialogList = res.data.list
        this.person = res.data.person
        this.dialogloading = false
        console.log(394, this.dialogloading)
      })
    },
    handleTime(e) {
      this.queryParams.endTime = this.formatDate(e[1])
      this.queryParams.startTime =this.formatDate(e[0])
      this.getList()
    },
     formatDate(date) {
      // 设置时间转换格式
      var y = date.getFullYear() // 获取年
      var m = date.getMonth() + 1 // 获取月
      m = m < 10 ? '0' + m : m // 判断月是否大于10
      var d = date.getDate() // 获取日
      d = d < 10 ? '0' + d : d // 判断日期是否大10
      let h = date.getHours() // 11
      h = h < 10 ? '0' + h : h // 判断日期是否大10
      let mm = date.getMinutes() // 14
      mm = mm < 10 ? '0' + mm : mm // 判断日期是否大10
      let s = date.getSeconds() // 44
      s = s < 10 ? '0' + s : s // 判断日期是否大10
      return y + '-' + m + '-' + d + ' ' + h +':'+mm +':'+s// 返回时间格式
    },
  },
  created() {
    this.getDept()
    this.getDuty()
    this.getList()
    this.getPost()
  }
}
</script>

<style lang="scss" scoped>
.info {
  margin-right: 30px;
  li {
    list-style: none;
    span {
      display: inline-block;
      width: 180px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border: 1px solid #000;
      border-bottom: none;
    }
    span:last-child {
      border-left: none;
    }
  }
  li:last-child {
    span {
      border-bottom: 1px solid #000;
    }
  }
}
</style>
